<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sty{
            background-color:saddlebrown;
            color: white;
        }
        .sty2{
            font-size: 26px;
        }
    </style>
</head>
<body>
    <pre>
        JQuery语法：
        $("选择器").方法名(参数)
        选择器：
            用于获取指定网页元素
        方法：
            实现逻辑功能的
        
        JQ中的事件：
        基础事件
            鼠标事件
                左键单击 click()
                鼠标悬停 mouseover()
                鼠标移开 mouseout()
            键盘事件
                键盘按下 keydown() / keypress() / keyup()
            window事件
                工厂函数
                窗口大小改变  resize()
                窗口滚动条事件 scroll()
            表单事件
                获得焦点  focus()
                失去焦点  blur()
                表单提交  submit()        
        高级(复合)事件
            鼠标光标悬停和移开  hover( 函数 )
            鼠标连续点击  toggle( 函数 )

        绑定事件
            bind("事件名",fn)
            使用json格式绑定多个事件
        解绑定事件
            unbind("事件名")

        注意：
             当触发事件的事件源和函数操作的对象是同一对象时，可用this代替
             当触发事件的事件源有多个事件触发时，可以连续点方法

        toggle方法：
           有参时，传递函数，表示连续点击事件
           无参时，不传值，表示显示和隐藏之间切换 [第三方事件触发]
        toggleClass方法：
            在添加类选择器样式和移除类选择器样式之间切换  [第三方事件触发] 
            
        方法名除了事件名以外，还可以是函数名：
            1）css
                JQ.css("属性名")           获取样式

                JQ.css("属性名", 属性值)   设置单个样式

                JQ.css({"属性名":"属性值","属性名":"属性值"})  设置多个样式
                JQ.css("属性名", 属性值).css("属性名", 属性值)

                JQ.css("属性名","")        移除样式

            2）addClass  添加类选择器样式
                JQ.addClass("类选择器名")  设置单个类选择

                JQ.addClass("类选择器名").addClass("类选择器名") 设置多个类选择
                JQ.addClass("类选择器名 类选择器名")

            3）removeClass  移除类选择器
                JQ.removeClass("类选择器名")
                JQ.removeClass("类选择器名").removeClass("类选择器名")
                JQ.removeClass("类选择器名 类选择器名")
        
        jQuery动画效果：
            系统提供：显示和隐藏，参数：毫秒写数字/ 单词 fast、slow
                方式一：控制元素的高宽和透明度来显示与隐藏
                        show()显示
                        hide()隐藏
                方式二：控制改变元素的透明度
                        fadeIn()显示
                        fadeOut()隐藏
                方式三：控制改变元素高度
                        slideDown()显示
                        slideUp()隐藏
            自定义动画：
                语法：
                     $("选择器").animate({JSON格式参数},耗时ms,fn);
                注意：
                      在一个animate写的样式时同时触发，分到不同animate写的样式时分开触发
        
    </pre>

    <div id="id1" style="line-height: 50px;">
        鼠标单击事件
    </div>
    <br/>
    <br/>

    <input type="text" id="id2"/>
    <input type="text" id="id3"/>

    <br/>
    <br/>

    <form method="post" action="2.html">
        <input type="submit" value="提交"/>
    </form>

    <br/>
    <br/>

    <p id="id4">
        悬停和移开
    </p>

    <br/>
    <br/>

    <p id="id5">
        连续点击
    </p>
    
    <br/>
    <br/>

    <p id="id6">
        绑定事件
    </p>
    
    <br/>
    <br/>

    <input type="button" value="toggle的显示隐藏" id="id8" />
    <div id="id7">
        toggle的显示隐藏。。。
    </div>

    <br/>
    <br/>

    <input type="button" value="toggleClass" id="id10" />
    <div id="id9" class="sty2">
        toggleClass的类样式添加和移除。。。
    </div>

    <br/>
    <br/>

    <div id="id11">
        通过JQ的css方法设置样式
    </div>

    <br/>
    <br/>

    <div id="id12">
        通过JQ的addClass方法设置样式
    </div>

    <br/>
    <br/>

    <input type="button" value="show：透明度和高宽来显示" id="id13">
    <input type="button" value="hide：透明度和高宽来隐藏" id="id14">
    <div id="id15" style="height: 100px; width:260px; background-color:skyblue">
        通过改变透明度和高宽来显示隐藏
    </div>

    <br/>
    <br/>
    
    <input type="button" value="fadeIn：透明度来显示" id="id16">
    <input type="button" value="fadeOut：透明度来隐藏" id="id17">
    <div id="id18" style="height: 100px; width:260px; background-color:skyblue">
        通过改变透明度来显示隐藏
    </div>

    <br/>
    <br/>

    <input type="button" value="slideDown：高度来显示" id="id19">
    <input type="button" value="slideUp：高度来隐藏" id="id20">
    <div id="id21" style="height: 100px; width:260px; background-color:skyblue">
        通过改变高度来显示隐藏
    </div>

    <br/>
    <br/>

    <input type="button" value="自定义动画" id="id23">
    <div id="id22" style="height: 100px; width:200px; background-color:bisque">
        自定义动画
    </div>

    <br/>
    <br/>

    <script type="text/javascript" src="js/jQuery.js"></script>
    <!-- <script type="text/javascript" src="js/jquery-1.8.3.js"></script> -->
    <script type="text/javascript" src="js/chapter2.js"></script>
</body>
</html>